<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>订单查询</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="querry-order">
      <search-form :search="search" :mode.sync="mode" :show-table-mode="showTableMode" :reset-search-data="resetSearch"
        @init-search="setOrderList(true)" @search-click="searchData">
        <span v-if="totalOrderCount!==null">订单总数:{{totalOrderCount}}</span>
      </search-form>
      <div class="querry-order-help clearfix">
        <div class="clearfix">
          <div class="color accessTardiness"></div>
          <span v-if="showTableMode!=='match'">代表车间生产将近拖期(3天以内包括3天),</span>
          <span>交货日期列代表订单将近拖期(10天以内包括10天)</span>
        </div>
        <div class="clearfix">
          <div class="color tardiness"></div>
          <span v-if="showTableMode!=='match'">代表车间生产已经拖期,</span>
          <span>交货日期列代表订单已经拖期</span>
        </div>
        <div class="clearfix">
          <div class="color finishSetting"></div>
          <span>代表该订单已经完成</span>
        </div>
      </div>
      <div class="querry-order-table-div">
        <el-table fit stripe border ref="table" :key="tableId" class="querry-order-table" :data="orderList" style="width: 100%"
          header-row-class-name="orderTableHeader" :span-method="mergeMethod" :cell-class-name="getDelayaClassName" ref="orderTable" height="parent">
          <el-table-column sortable prop="showOrderId" label="订单编号" min-width="140px" fixed="left" key="showOrderId">
            <template slot-scope="scope">
              <div v-if="!SysUtil.isEmpty(scope.row.showOrderId)" class="table-btn" @click="toLookDetail(scope.row)">
                {{scope.row.showOrderId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="factoryId" label="工厂型号" min-width="130px" fixed="left" key="factoryId">
            <template slot-scope="scope">
              <div v-if="!SysUtil.isEmpty(scope.row.factoryId)" class="table-btn" @click="showQuanImg(scope.row)">
                {{scope.row.factoryId}}
              </div>
            </template>
          </el-table-column>
          <el-table-column sortable prop="customerId" label="客户型号" min-width="130px" fixed="left" key="customerId"></el-table-column>

          <template v-if="showTableMode==='match'||(showTableMode==='order'&&mode==='hard')">
            <el-table-column sortable prop="customerOrderId" label="客户订单号" min-width="105px" key="customerOrderId"></el-table-column>
            <el-table-column sortable prop="customer" label="客户" min-width="100px" key="customer">
            </el-table-column>
            <el-table-column sortable prop="chiCun" label="尺寸" min-width="100px" key="chiCun">
            </el-table-column>
            <el-table-column sortable sort-by="xiaDanDate" :resizable="false" label="下单日期" width="95px" align="center" key="xiaDanDate">
              <template slot-scope="scope">
                <span v-if="scope.row.sort<0">
                  {{scope.row.xiaDanDate===''?'':moment(scope.row.xiaDanDate).format('YYYY-MM-DD')}}
                </span>
                <update-date-popover v-else :date="scope.row.xiaDanDate" :max-date="scope.row.jiaoDate" title="下单日期"
                  @save-date="function(time){updatexiaDanTime(time,order)}"></update-date-popover>
              </template>
            </el-table-column>
          </template>

          <el-table-column sortable :resizable="false" prop="jiaoDate" label="交货日期" width="95px" align="center" key="jiaoDate">
            <template slot-scope="scope">
              <div v-if="scope.row.jiaoDate!==''" class="table-btn" @click="lookOrderImg(scope.row)">
                {{moment(scope.row.jiaoDate).format('YYYY-MM-DD')}}</div>
            </template>
          </el-table-column>
          <el-table-column sortable v-if="showTableMode==='detail'||showTableMode==='order'||showTableMode==='match'" :resizable="false"
            prop="orderCount" label="订单总数" min-width="100px" align="center" key="orderCount">
            <template slot-scope="scope">
              <div class="table-btn" @click="toWorkProcedure(scope.row)">
                {{scope.row.orderCount}}
              </div>
            </template>
          </el-table-column>

          <template v-if="showTableMode==='detail'||showTableMode==='match'">
            <el-table-column label="圈料" min-width="150px" header-align="center" key="ringMaterial" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{getMaterial('ring',scope.row)}}</span>
              </template>
            </el-table-column>
            <el-table-column label="腿料" min-width="150px" header-align="center" key="legMaterial" :show-overflow-tooltip="true">
              <template slot-scope="scope">
                <span>{{getMaterial('leg',scope.row)}}</span>
              </template>
            </el-table-column>
          </template>

          <template v-if="showTableMode==='match'">
            <el-table-column label="配套情况" min-width="120px" key="workShopMaix">
              <template slot-scope="scope">
                <div v-if="scope.row.wpcbs.length>0">
                  <span v-for="(wpcb,index) in scope.row.wpcbs" :key="'match-item_'+index" class="order-match" :style="{color:wpcb.color}"
                    @click="matchDetail(wpcb)">
                    {{wpcb.workshopName}}-{{wpcb.text}}
                  </span>
                </div>
                <span v-else>
                  请检查车间配套物料设置
                </span>
              </template>
            </el-table-column>
          </template>
          <template v-else>
            <el-table-column sortable sort-by="purchaseStatus" label="采购" min-width="65px" align="center" key="purchaseStatus">
              <template slot-scope="scope">
                <div v-html="scope.row.purchaseStatusHtml"></div>
              </template>
            </el-table-column>
            <el-table-column sortable sort-by="inStatus" label="入库" min-width="65px" align="center" key="inStatus">
              <template slot-scope="scope">
                <div v-html="scope.row.inStatusHtml"></div>
              </template>
            </el-table-column>
            <el-table-column sortable sort-by="putOutStatus" label="外协" min-width="65px" align="center" key="putOutStatus">
              <template slot-scope="scope">
                <div v-if="scope.row.putOutStatus!==null" class="table-btn" @click="toOutOrder(scope.row)">
                  {{i18n.getMsg(`querryOrder.putOutStatus.${scope.row.putOutStatus}`)}}
                </div>
              </template>
            </el-table-column>
            <el-table-column v-for="(workShop,index) in tableWorkShopList" :key="'tableWorkShop_'+workShop.id" :resizable="false"
              :label="workShop.name">
              <el-table-column v-if="showTableMode==='order'" label="完成情况" min-width="100px" align="center" column-key="finishStatus"
                :key="'finishStatus_'+workShop.id">
                <template slot-scope="scope">
                  <span v-if="getWorkShopDetail(scope.row,workShop)===null">
                    无需生产
                  </span>
                  <span v-else>{{getFinishStatus(scope.row,workShop)}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="人工排期" width="95px" align="center"
                :key="'peopleSetTime_'+workShop.id">
                <template slot-scope="scope">
                  <span v-if="!getWorkShopDetail(scope.row,workShop,'canUpdate')">
                    <span>{{getWorkShopDate(scope.row,workShop,'peopleSetTime')}}</span>
                  </span>
                  <update-date-popover v-else title="人工排期" :date="getWorkShopDetail(scope.row,workShop,'peopleSetTime')"
                    :max-date="scope.row.jiaoDate" :min-date="moment().valueOf()"
                    @save-date="function(time,popover){updateSetTime(time,scope.row,workShop,popover)}">
                  </update-date-popover>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="物料" min-width="80px"
                :key="'status_'+workShop.id">
                <template slot-scope="scope">
                  <div class="table-btn" @click="sufficeDetail(scope.row,workShop)">
                    {{getWorkShopDetail(scope.row,workShop,'status')}}</div>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableMode==='detail'||mode==='hard'" :resizable="false" label="完成日期" width="80px" align="center"
                :key="'finishTime_'+workShop.id">
                <template slot-scope="scope">
                  <span v-if="showTableMode==='detail'&&getWorkShopDetail(scope.row,workShop)===null">
                    无需生产
                  </span>
                  <span v-else>{{getWorkShopDate(scope.row,workShop,'finishTime','MM-DD')}}</span>
                </template>
              </el-table-column>
              <el-table-column v-if="showTableMode==='order'&&mode==='hard'" :resizable="false" label="预计完成日期" width="100px" align="center"
                :key="'yuJiTime_'+workShop.id">
                <template slot-scope="scope">
                  <span>{{getWorkShopDetail(scope.row,workShop,'yuJiTimeStr')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="数量" min-width="80px" align="center" :key="'wsCount_'+workShop.id">
                <template slot-scope="scope">
                  <span>{{getWorkShopDetail(scope.row,workShop,'count')}}</span>
                </template>
              </el-table-column>
            </el-table-column>
          </template>
          <el-table-column :resizable="false" prop="setting" label="操作" :width="handleWidth" class-name="no-excel" key="handle" fixed="right">
            <template slot-scope="scope">
              <div class="handle-btns clearfix">
                <template v-if="scope.row.sort>=0">
                  <el-button v-if="hasSettingBtn" type="primary" size="mini" @click="toFinishPro(scope.row)">
                    设置完成
                  </el-button>
                  <el-button v-if="hasBalanceBtn" type="primary" size="mini" @click="toBalancePro(scope.row)">
                    结单
                  </el-button>
                </template>
                <template v-else-if="hasCancelSettingBtn">
                  <el-button type="primary" size="mini" @click="toCancelFinishPro(scope.row)">
                    取消设置完成
                  </el-button>
                </template>
                <el-button v-if="hasProFlowBtn" type="primary" size="mini" @click="lookProductFlow(scope.row)">配件工艺</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="margin-top:5px;text-align:right" v-if="pagination.totalCount!==0">
        <el-pagination background :page-size="pagination.pageSize" :total="pagination.totalCount" :current-page.sync="pagination.currentPage"
          @current-change="pageChange"></el-pagination>
      </div>
    </div>

    <el-dialog :title="imgDialogTitle" :visible.sync="openPreviewImg" :fullscreen="true" class="img-dialog" :lock-scroll="true" :show-close="true"
      @closed="order=null">
      <preview-img v-if="openPreviewImg" :img="previewImg" :order="order" @close="openPreviewImg=false"></preview-img>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" :visible.sync="openOrderDetail" custom-class="sysAddFormDialog orderDialog" @closed="order=null">
      <div class="order-detail-title clearfix" slot="title">
        <div>订单明细</div>
        <template v-for="(title,index) in orderDetailTitles">
          <div :key="`title_${index}`" class="title-item">{{title}}</div>
        </template>
      </div>
      <div style="height: 100%;overflow: auto;">
        <order-detail v-if="openOrderDetail" :order="order" @change-title="changeOrderTitle"></order-detail>
      </div>
    </el-dialog>

    <el-dialog title="车间生产物料入库情况" :visible.sync="openSufficeDialog" top="10vh" class="sufficeDetailDialog" @closed="sufficeDetailData=null"
      width="65%">
      <div style="min-height:60vh;max-height:70vh;overflow:auto;">
        <suffice-detail v-if="openSufficeDialog" :details="sufficeDetailData"></suffice-detail>
      </div>
    </el-dialog>

    <el-dialog title="外协单" :visible.sync="openOutOrder" top="5vh" width="90%" @closed="order=null">
      <div style="height:calc(90vh - 51px);">
        <out-order v-if="openOutOrder" :order="order"></out-order>
      </div>
    </el-dialog>

    <el-dialog fullscreen title="物料进度" :visible.sync="openWorkProcedure" custom-class="workProcedureDialog" @closed="order=null">
      <div v-if="openWorkProcedure" style="height:100%;">
        <div style="height:calc(100% - 50px);overflow:auto;">
          <work-procedure :order="order"></work-procedure>
        </div>
        <div style="margin-top:10px;text-align:center">
          <el-button size="small" type="primary" @click="openWorkProcedure=false">关闭</el-button>
        </div>
      </div>
    </el-dialog>

    <el-dialog v-if="requestErrorObj!==null" :title="requestErrorTitle" :visible.sync="openRequestError" top="10vh" width="650px"
      @closed="requestErrorClosed">
      <div style="height:calc(80vh - 54px);overflow:auto;">
        <request-error :error-data="requestErrorObj"></request-error>
      </div>
    </el-dialog>
  </div>
</body>
<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/colorHelp.css",
    "./css/searchForm.css",
    "./css/proReport.css",
    "./css/orderDetail.css",
    "./css/updateDatePopover.css",
    "./css/sufficeDetail.css",
    "./css/outOrder.css",
    "./css/workProcedure.css",
    "./css/previewImg.css",
    "./css/requestError.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/models/baseModel.js",
    "/vueSystem/js/dropdownUtil.js",
    "/vueSystem/js/permissionUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/updateOrderImg.js"
  ]);

</script>
<script src="../models/orderSearchModel.js"></script>
<script src="../models/orderModel.js"></script>
<script src="./colorHelp.js"></script>
<script src="./searchForm.js"></script>
<script src="./proReport.js"></script>
<script src="./orderDetail.js"></script>
<script src="./updateDatePopover.js"></script>
<script src="./sufficeDetail.js"></script>
<script src="./outOrder.js"></script>
<script src="./workProcedure.js"></script>
<script src="./previewImg.js"></script>
<script src="./requestError.js"></script>
<script>
  var app = new Vue({
    el: '#app',
    watch: {
      mode: function () {
        this.tableId = SysUtil.getId();
      }
    },
    data: function () {
      var self = this;
      var search = new OrderSearchModel();
      return {
        loading: false,
        mode: 'simple',
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        orderList: [],
        sourceOrders: [],
        tableWorkShopList: [],
        hasSettingBtn: false,
        hasCancelSettingBtn: false,
        hasBalanceBtn: false,
        hasProFlowBtn: false,
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        previewImg: '',
        imgDialogTitle: '',
        openPreviewImg: false,
        order: null,
        openOrderDetail: false,
        orderDetailTitles: [],
        openSufficeDialog: false,
        sufficeDetailData: null,
        openOutOrder: false,
        openWorkProcedure: false,
        SysUtil: SysUtil,
        moment: moment,
        i18n: i18n,
        searchMode: 'order',
        showTableMode: 'order',
        totalOrderCount: null,
        handleWidth: '50px',
        requestErrorObj: null,
        openRequestError: false,
        requestErrorTitle: '',
        tableId: SysUtil.getId()
      };
    },
    created: function () {
      var self = this;
      SysUtil.getUser().then(function (user) {
        var companyId = user.companyId;
        var hasSettingBtn = PermissionUtil.validateAuthorityByUser(user,
          'orderProcedureTemplate/setOrderSort');
        self.hasSettingBtn = companyId !== 28 && hasSettingBtn;

        var hasBalanceBtn = user.companyInfo.type === 2;
        self.hasBalanceBtn = hasBalanceBtn;

        self.hasCancelSettingBtn = [1, 210].indexOf(companyId) !== -1;
        self.hasProFlowBtn = companyId === 1;
      });
    },
    methods: {
      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },
      searchData: function (searchMode) {
        this.searchMode = searchMode;
        this.pagination.currentPage = 1;
        this.setOrderList(true);
      },
      pageChange: function () {
        this.setOrderList();
      },
      setOrderList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var search = this.search;
        var msg = search.checkValidate();
        if (msg !== '') {
          this.$alert(msg, '信息');
          return;
        }

        var postData = search.getObject(this.pagination);
        var searchMode = this.searchMode;
        var url = '';
        var hasResult;
        if (searchMode === 'order') {
          url = 'order/getOrderMain';
          hasResult = false;
        } else if (searchMode === 'detail') {
          url = 'order/queryOrderPageDateil';
          hasResult = true;
        } else {
          url = 'order/getOrderMixMaterial';
          hasResult = false;
        }

        this.loading = true;
        var self = this;
        return ajaxRequest(url, postData, hasResult).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var orderInfo = res.orderList;
          var orderList = orderInfo.returnData;
          if (SysUtil.isEmpty(orderList) && self.pagination.currentPage > 1) {
            self.pagination.totalCount = orderInfo.iTotalRecords;
            self.$nextTick(function () {
              self.setOrderList(isSearch);
            });
            return [];
          }

          var deptWorkShop = res.deptWorkShop;
          var orders = [];
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            order = new OrderModel(order, searchMode);
            orders.push(order);
          }
          self.orderList = orders;

          if (searchMode !== 'match') {
            var tableWorkShopList = _.map(deptWorkShop, function (workShop) {
              return {
                id: workShop.id,
                name: workShop.workshopName
              };
            });
            self.tableWorkShopList = tableWorkShopList;
          } else {
            self.tableWorkShopList = [];
          }

          self.totalOrderCount = res.sumOrderCount;
          self.pagination.totalCount = orderInfo.iTotalRecords;
          self.showTableMode = searchMode;
          self.setHandleWidth();
          self.loading = false;
          return orderList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },
      setHandleWidth: function () {
        var orderList = this.orderList;
        if (orderList.length === 0) {
          this.handleWidth = '50px';
          return;
        }

        var btnWidth = 10;
        if (this.hasProFlowBtn) {
          btnWidth += 85;
        }

        var orderList = this.orderList;
        var orders = _.filter(orderList, function (obj) {
          return obj.sort >= 0;
        });

        var width = 0;
        var hasSettingBtn = this.hasSettingBtn,
          hasBalanceBtn = this.hasBalanceBtn,
          hasCancelSettingBtn = this.hasCancelSettingBtn;

        if (orders.length > 0) {
          if (hasSettingBtn) {
            width += 85;
          }
          if (hasBalanceBtn) {
            width += 61;
          }
        }
        if (orders.length < orderList.length) {
          if (hasCancelSettingBtn) {
            width = Math.max(width, 109);
          }
        }

        btnWidth += width - 5;
        btnWidth = Math.max(btnWidth, 50);
        this.handleWidth = `${btnWidth}px`;
      },
      toFinishPro: function (order) {
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/setOrderSort', {
          orderId: order.orderId,
          sort: -2,
          type: 1
        }, false, false).then(function (res) {
          self.loading = false;
          var result = res.result;
          if (!result) {
            var info = res.info;
            if (JSON.checkValidate(info)) {
              self.requestErrorTitle = "设置完成失败原因";
              self.showErrorDialog(order, info, 'setting');
            } else {
              self.$alert(info, '信息');
            }
            return;
          }
          self.$alert('设置完成设置成功', '信息', {
            callback: function () {
              self.changeOrderData(order);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      toCancelFinishPro: function (order) {
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/setOrderSort', {
          orderId: order.orderId,
          sort: 1,
          type: 1
        }).then(function (msg) {
          self.loading = false;
          self.$alert('成功取消设置完成', '信息', {
            callback: function () {
              self.changeOrderData(order);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      toBalancePro: function (order) {
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/setOrderSort', {
          orderId: order.orderId,
          sort: -2,
          type: 2
        }, false).then(function (res) {
          self.loading = false;
          var result = res.result;
          if (result) {
            self.$alert('该订单成功结算', '信息', {
              callback: function () {
                self.changeOrderData(order);
              }
            });
            return;
          }

          var info = res.info;
          if (!JSON.checkValidate(info)) {
            self.$alert(info, '信息');
            return;
          }

          self.requestErrorTitle = "订单结算失败原因";
          self.showErrorDialog(order, info, 'balance');
        }).catch(function () {
          self.loading = false;
        });
      },
      showErrorDialog: function (order, info, type) {
        var details = JSON.parse(info);
        var detailList = [];
        var noFeedMaterialList = [];
        // 未发料
        for (var i = 0; i < details.length; i++) {
          var detail = details[i];
          var type = detail.type;
          if (type === 7) {
            noFeedMaterialList.push(detail.statusStr);
          } else {
            detailList.push({
              statusStr: detail.statusStr,
              touchTime: moment(detail.touchTime).valueOf(),
              approvalUserName: detail.approvalUserName
            });
          }
        }

        this.requestErrorObj = {
          order: order,
          type: type,
          detailList: detailList,
          noFeedMaterialList: noFeedMaterialList
        };
        this.openRequestError = true;
      },
      requestErrorClosed: function () {
        this.requestErrorObj = null;
        this.requestErrorTitle = '';
      },
      showQuanImg: function (order) {
        var img = order.quanImg;
        if (img === null || img.trim() === '') {
          this.$alert('该订单未设置圈图', '信息');
          return;
        }
        this.previewImg = img;
        this.imgDialogTitle = '圈图';
        this.openPreviewImg = true;
      },
      toLookDetail: function (order) {
        this.order = order;
        this.openOrderDetail = true;
        this.orderDetailTitles = [];
      },
      changeOrderTitle: function (titles) {
        this.orderDetailTitles = titles;
      },
      toWorkProcedure: function (order) {
        this.order = order;
        this.openWorkProcedure = true;
      },
      toOutOrder: function (order) {
        var putOutStatus = order.putOutStatus;
        if (putOutStatus === 0) {
          this.$alert('此订单无外协单');
          return;
        }

        this.order = order;
        this.openOutOrder = true;
      },
      getDelayaClassName: function (option) {
        var column = option.column;
        var property = column.property;
        if (property === 'setting') {
          return '';
        }

        var row = option.row;
        if (property === 'jiaoDate') {
          return this.getOrderDelay(row);
        } else if (['orderId', 'factoryId', 'customerId'].indexOf(property) !== -1) {
          if (row.sort < 0) {
            return 'finishSetting';
          }
          return '';
        }
        var showTableMode = this.showTableMode;
        if (showTableMode === 'match') {
          return '';
        }

        var mode = this.mode;
        var colCount = 0;
        if (showTableMode === 'detail') {
          colCount = 10;
        } else if (mode === 'simple') {
          colCount = 7;
        } else if (mode === 'hard') {
          colCount = 12;
        }
        var columnIndex = option.columnIndex;
        var colIndex = columnIndex - colCount;
        if (colIndex < 0) {
          return '';
        }

        var tableWorkShopList = this.tableWorkShopList;
        var index;
        if (showTableMode === 'detail') {
          index = Math.floor(colIndex / 2);
        } else if (mode === 'simple') {
          index = Math.floor(colIndex / 2);
        } else if (mode === 'hard') {
          index = Math.floor(colIndex / 6);
        }
        var workShop = tableWorkShopList[index];
        if (column.columnKey === 'finishStatus') {
          return this.setOrderFinishClassName(row, workShop);
        }
        var sort = row.sort;
        if (sort < 0) {
          return '';
        }

        var detail = this.getWorkShopDetail(row, workShop);
        if (detail === null) {
          return '';
        }
        var endDate = moment(detail.peopleSetTime).startOf('day').valueOf();
        if (endDate === '') {
          endDate = moment(detail.yuJiTime).startOf('day').valueOf();
        }
        var startDate;
        var isFinish = detail.isFinish;
        if (isFinish === 1) {
          startDate = moment(detail.finishTime).startOf('day').valueOf();
        } else {
          startDate = moment().valueOf();
        }
        var rangeDay = moment(endDate).diff(startDate, 'day');
        if (isNaN(rangeDay)) {
          return '';
        }
        if (rangeDay < 0) {
          return 'tardiness';
        }
        if (rangeDay <= 3) {
          return 'accessTardiness';
        }
        return '';
      },
      setOrderFinishClassName: function (order, workShop) {
        var detail = this.getWorkShopDetail(order, workShop);
        if (detail === null) {
          return '';
        }
        var finishStatus = detail.finishStatus;
        return `product-${finishStatus}`;
      },
      getOrderDelay: function (order) {
        var sort = order.sort;
        if (sort < 0) {
          return '';
        }

        var dutyStatus = order.dutyStatus;

        if (dutyStatus === 1) {
          return 'tardiness';
        }
        if (dutyStatus === 2) {
          return 'accessTardiness';
        }
        return '';
      },
      getFinishStatus: function (order, workShop) {
        var detail = this.getWorkShopDetail(order, workShop);
        if (detail === null) {
          return '';
        }
        return detail.finishStatusText;
      },
      getWorkShopDate: function (order, workShop, field, formatter) {
        var time = this.getWorkShopDetail(order, workShop, field);
        if (time === '') {
          return '';
        }

        if (formatter === undefined) {
          formatter = 'YYYY-MM-DD';
        }
        return moment(time).format(formatter);
      },
      getWorkShopDetail: function (order, workShop, field) {
        return order.getWorkShopDetail(workShop, field);
      },
      updatexiaDanTime: function (time, order) {
        if (time === null) {
          this.$alert('请选择下单日期', '信息');
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('order/updateOrderXianDanDate', {
          orderId: order.orderId,
          time: moment(time).format('YYYY-MM-DD')
        }).then(function () {
          self.loading = false;
          self.$alert('下单日期修改成功', '信息', {
            callback: function () {
              self.changeOrderData(order);
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      updateSetTime: function (time, order, workShop, popover) {
        if (time === null) {
          this.$alert('请选择人工排期日期', '信息');
          return;
        }
        this.loading = true;
        var self = this;
        ajaxRequest('order/setOrderWorkShopTime', {
          orderId: order.orderId,
          workShopId: workShop.id,
          time: moment(time).format('YYYY-MM-DD')
        }).then(function (res) {
          self.loading = false;
          self.$alert('人工排期修改成功', '信息', {
            callback: function () {
              var detail = order.getWorkShopDetail(workShop);
              detail.peopleSetTime = time;
              popover.isShow = false;
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },
      sufficeDetail: function (order, workShop) {
        var detail = this.getWorkShopDetail(order, workShop);
        var detailList = detail.detailList;
        if (detailList === null) {
          detailList = [];
        } else {
          detailList = _.cloneDeep(detailList);
        }
        var sort = order.sort;
        var sufficeDetailData = _.map(detailList, function (obj) {
          if (sort < 0) {
            obj.inStatus = 1;
          }
          return obj;
        });

        this.sufficeDetailData = sufficeDetailData;
        this.openSufficeDialog = true;
      },
      lookOrderImg: function (order) {
        var self = this;
        this.loading = true;
        ajaxRequest('order/getOrderApprovalImg', {
          type: 1,
          orderId: order.orderId
        }).then(function (url) {
          self.loading = false;

          if (url === null || url === '') {
            self.$alert('无生产订单图片', '信息');
            return;
          }
          self.imgDialogTitle = '生产订单预览';
          self.previewImg = url;
          self.order = order;
          self.openPreviewImg = true;
        }).catch(function () {
          self.loading = false;
        });
      },
      getMaterial: function (type, order) {
        var materialTypeList = [];
        if (type === 'ring') {
          materialTypeList = ["金属圈", "板材圈", "TR圈", "PC圈", "塑钢圈", "注塑圈", "TLL圈"];
        } else if (type === 'leg') {
          materialTypeList = ["金属肶", "板材肶", "TR肶", "PC肶", "塑钢肶", "注塑腿", "TLL肶"];
        }

        var orderMaterialList = order.orderMaterialList;
        orderMaterialList = _.filter(orderMaterialList, function (material) {
          return materialTypeList.indexOf(material.materialType) !== -1;
        });
        var colorList = [];
        var len = orderMaterialList.length;
        for (var i = 0; i < len; i++) {
          var material = orderMaterialList[i];
          var color = material.colorDescription === '' ? material.color : material.colorDescription;
          if (color !== '') {
            colorList.push(color);
          }
        }
        return colorList.join('+');
      },
      mergeMethod: function (option) {
        var showTableMode = this.showTableMode;
        if (showTableMode === 'match') {
          return [1, 1];
        }
        var property = option.column.property;
        if (property === 'setting') {
          return [1, 1];
        }

        var mode = this.mode;
        var colCount = 0;
        if (showTableMode === 'detail') {
          colCount = 10;
        } else if (mode === 'simple') {
          colCount = 8;
        } else if (mode === 'hard') {
          colCount = 12;
        }

        var row = option.row;
        var columnIndex = option.columnIndex;
        var colIndex = columnIndex - colCount;
        if (colIndex < 0) {
          return [1, 1];
        }
        var tableWorkShopList = this.tableWorkShopList;
        var mergeColCount;
        if (showTableMode === 'detail') {
          mergeColCount = 2;
        } else if (mode === 'simple') {
          mergeColCount = 2;
        } else if (mode === 'hard') {
          mergeColCount = 6;
        }
        var index = Math.floor(colIndex / mergeColCount);
        var workShop = tableWorkShopList[index];
        if (this.getWorkShopDetail(row, workShop) !== null) {
          return [1, 1];
        }

        if (colIndex % mergeColCount === 0) {
          return [1, mergeColCount];
        }
        return [0, 0];
      },
      matchDetail: function (wpcb) {
        var colorList = wpcb.colorList;
        var msg;
        if (colorList.length > 0) {
          for (var i = 0; i < colorList.length; i++) {
            var color = colorList[i];
            if (color.indexOf('未生产完成') !== -1 || color.indexOf('未采购') !== -1) {
              color = `<span style="color:#ff0000;">${color}</span>`;
            } else {
              color = `<span>${color}</span>`;
            }
            colorList[i] = color;
          }
          msg = colorList.join('<br>')
        } else {
          msg = '无配套详情数据';
        }
        this.$alert(msg, '配套详情', {
          dangerouslyUseHTMLString: true
        });
      },
      lookProductFlow: function (order) {
        var self = this;
        this.loading = true;
        ajaxRequest('order/getOrderApprovalImg', {
          type: 8,
          orderId: order.orderId
        }).then(function (url) {
          self.loading = false;

          if (url === null || url === '') {
            self.$alert('无订单配件工艺', '信息');
            return;
          }
          self.imgDialogTitle = '订单配件工艺';
          self.previewImg = url;
          self.openPreviewImg = true;
        }).catch(function () {
          self.loading = false;
        });
      },
      changeOrderData: function (order) {
        var searchMode = this.searchMode;
        var url = '';
        var hasResult;
        if (searchMode === 'order') {
          url = 'order/getOrderMain';
          hasResult = false;
        } else if (searchMode === 'detail') {
          url = 'order/queryOrderPageDateil';
          hasResult = true;
        } else {
          url = 'order/getOrderMixMaterial';
          hasResult = false;
        }
        var postData = order.getOrderIdObj();

        this.loading = true;
        var self = this;
        return ajaxRequest(url, postData, hasResult).then(function (res) {
          var orderInfo = res.orderList;
          var orderList = orderInfo.returnData;
          if (SysUtil.isEmpty(orderList)) {
            self.loading = false;
            return;
          }

          var newOrder = orderList[0];
          newOrder = new OrderModel(newOrder, searchMode);

          var orderList = self.orderList;
          var orders = [];
          for (var i = 0; i < orderList.length; i++) {
            var order = orderList[i];
            if (order.orderId === newOrder.orderId) {
              orders.push(newOrder);
            } else {
              orders.push(order);
            }
          }
          self.orderList = orders;
          self.setHandleWidth();
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },
    components: {
      SearchForm: SearchForm,
      OrderDetail: OrderDetail,
      UpdateDatePopover: UpdateDatePopover,
      SufficeDetail: SufficeDetail,
      OutOrder: OutOrder,
      WorkProcedure: WorkProcedure,
      PreviewImg: PreviewImg,
      RequestError: RequestError
    }
  });

</script>
<style>
  .querry-order {
    padding: 10px 20px;
    padding-bottom: 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .querry-order-help>div {
    float: left;
    margin-right: 10px;
  }

  .querry-order-help>div>* {
    float: left;
    line-height: 30px;
  }

  .querry-order-help .color {
    height: 20px;
    width: 20px;
    margin-top: 5px;
    margin-right: 5px;
  }

  .querry-order .querry-order-table-div {
    width: 100%;
    overflow: auto;
    flex: 1;
  }

  .querry-order .querry-order-table-div .orderTableHeader th>.cell {
    text-align: center;
  }

  .querry-order .querry-order-table-div .orderTableHeader th {
    background: #F5F7FA;
  }

  .querry-order .querry-order-table-div .table-btn {
    padding: 5px 0;
    color: #409EFF;
    cursor: pointer;
    text-align: center;
  }

  .querry-order .querry-order-table-div .handle-btns>.el-button {
    float: left;
  }

  .querry-order .querry-order-table-div .handle-btns>.el-button+.el-button {
    margin-left: 5px;
  }

  .querry-order .el-table table.el-table__body tr td.accessTardiness {
    background: #E6A23C;
  }

  .querry-order .el-table table.el-table__body tr td.tardiness {
    background: #F56C6C;
  }

  .querry-order .el-table table.el-table__body tr td.finishSetting {
    background: #99ff99;
  }

  .querry-order .product-0 {
    color: #F56C6C;
  }

  .querry-order .el-table table.el-table__body tr td.product-1 {
    background: #99ff99;
  }

  .querry-order .el-table table.el-table__body tr td.product-3 {
    background: #E6A23C;
  }

  .order-detail-title>div {
    float: left;
  }

  .order-detail-title .title-item {
    font-size: 12px;
    color: #ff0000;
    margin-left: 10px;
    line-height: 26px;
  }

  .orderDialog {
    min-width: 600px;
  }

  .sufficeDetailDialog .el-dialog {
    margin-bottom: 0;
  }

  .querry-order .el-table td {
    padding: 5px 0;
  }

  .img-dialog .el-dialog__body {
    height: calc(100% - 54px);
  }

  .workProcedureDialog .el-dialog__body {
    height: calc(100% - 54px);
    overflow: auto;
  }

  .querry-order .order-match {
    margin-right: 5px;
    cursor: pointer;
  }

  .querry-order .order-match:last-child {
    margin-right: 0;
  }

</style>

</html>
